<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hiliter demonstration</title>

<style type="text/css">
body{
	background-color: lightblue;
}
iframe{
	width:900px;
	height:600px;
	border: dashed white 1px;
	background-color: lightgrey;
}
</style>
<script type="text/javascript">

function getSource(){
	//document.getElementById('frame').src='myContentProxy.php?target=' + escape(document.getElementById('adresse').value); //Uncomment to use external files
																															//Use php server
	document.getElementById('frame').src = document.getElementById('adresse').value; 										//Comment to use external files
	return false;
}
var hiliteStyle = document.createElement("span");
hiliteStyle.style.backgroundColor = "yellow";
hiliteStyle.className = "hilited";
//hiliteStyle.setAttribute('ondblclick', "parent.hilite.removeRange(this.getAttribute('hilite'));parent.hideAnnotation(this.getAttribute('hilite'))");
hiliteStyle.setAttribute('onclick', "parent.showAnnotation(event ,this.getAttribute('hilite'))" );	

var annotStyle = document.createElement('div');
annotStyle.style.color = "white";
annotStyle.className = "hiliteAnnotation";
annotStyle.style.backgroundColor = "blue";
annotStyle.style.margin = "2px";
annotStyle.style.fontStyle = "italic";

var close = document.createElement("span");
close.textContent = "X";
close.style.color = "red";
close.style.marginRight = "5px";
close.style.cursor = "pointer";
close.style.fontWeight = "bolder";
close.style.fontStyle = "normal";
close.setAttribute("onclick", "hideAnnotation(this.parentNode.getAttribute('hilite'))");
annotStyle.appendChild(close);
annotStyle.appendChild(document.createTextNode("%%date"));

var content = document.createElement('pre');
content.style.border="solid orange 1px";
content.style.fontStyle = "normal";
content.style.marginBottom = "0px";
content.appendChild(document.createTextNode("%%content"));
annotStyle.appendChild(content);

var del = document.createElement("span");
del.textContent = "Remove";
del.style.color = "red";
del.style.cursor = "pointer";
del.style.fontWeight = "bolder";
del.style.fontStyle = "normal";
del.style.fontSize = "8pt";
del.setAttribute("onclick", "hilite.removeRange(this.parentNode.getAttribute('hilite'));hideAnnotation(this.parentNode.getAttribute('hilite'))");
annotStyle.appendChild(del);

</script>
<script type="text/javascript" src="lib/Hiliter.js"></script>

</head>
<body>
<script type="text/javascript">
var annot = document.createElement('div');
annot.style.position = "absolute";
document.body.appendChild(annot);
var timeout;
function showAnnotation(e,id){
	var frame = document.getElementById("frame");
	setAnnotationPosition(e.clientX + frame.offsetLeft + 5, e.clientY + frame.offsetTop + 5);
	var an = hilite.getAnnotation(id);
	annot.appendChild(an);
}
function hideAnnotation(id){
	var a = annot.getElementsByTagName(annotStyle.tagName);
	for(var i =0; i < a.length; i++){
		if(a[i].getAttribute('hilite') == id){
			a[i].parentNode.removeChild(a[i]);
			break;
		}
	}
}

function setAnnotationPosition(x, y){
	annot.style.left = x + "px";
	annot.style.top = y + "px";
}

function setContent(id){
	var today=new Date();
	var h=today.getHours();
	var m=checkTime(today.getMinutes());
	var s=checkTime(today.getSeconds());
	hilite.createAnnotation(id, {'date':h+":"+m+":"+s, 'content':document.getElementById('content_area').value});
	document.getElementById('content_div').parentNode.removeChild(document.getElementById('content_div'));
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}

function annotateIt(e){
	var id = hilite.hiliteRange(document.getElementById('frame').contentWindow.getSelection().getRangeAt(0));
	var content_div = document.createElement('div');
	content_div.id="content_div";
	content_div.style.position = "absolute";
	content_div.style.left = e.clientX + "px";
	content_div.style.top = e.clientY + "px";
	var content_area = document.createElement('textarea');
	content_area.id = "content_area";
	content_area.style.backgroundColor = "white";
	content_area.style.color = "black";
	content_div.appendChild(content_area);
	var butt = document.createElement('button');
	butt.textContent = "Set Annotation";
	butt.setAttribute("onclick", "setContent("+id+")");
	content_div.appendChild(document.createElement('br'));
	content_div.appendChild(butt);
	document.body.appendChild(content_div);
}
</script>
<form onsubmit="return getSource();">
<input id="adresse" type="text" value="test.html" />
<input type="submit"/></form>
<button onclick="annotateIt(event);">Hilite!</button>
<br />
<center><iframe id="frame" onload="if(this.src){window.hilite = new Hiliter(this.contentWindow);window.hilite.setStyleNode(hiliteStyle);window.hilite.setStyleNode(annotStyle);}"></iframe></center>
<button onclick="javascript:document.getElementById('ei').value = hilite.exportHistory()">Export</button>
<button onclick="javascript:hilite.importHistory(document.getElementById('ei').value)">Import</button><textarea id="ei" rows="1" cols="60"></textarea>
</body>
</html>